<template>
  <div id="MoveBox" >  
    <slot> </slot>
  </div>
</template>

<script>
import {  onMounted } from "vue";

export default {
  name: "DropBox",

  setup() { 
    
    onMounted(() => {
    const MoveBox = document.querySelector("#MoveBox")
      
      let box = MoveBox

      var flag = false;
      var cur = {
        x: 0,
        y: 0,
      };
      var nx, ny, dx, dy, x, y;
      function down() {
        flag = true;
        var touch;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        cur.x = touch.clientX;
        cur.y = touch.clientY;
        dx = div2.offsetLeft;
        dy = div2.offsetTop;
      }
      function move() {
        if (flag) {
          var touch;
          if (event.touches) {
            touch = event.touches[0];
          } else {
            touch = event;
          }
          nx = touch.clientX - cur.x;
          ny = touch.clientY - cur.y;
          x = dx + nx;
          y = dy + ny;
          div2.style.left = x + "px";
          div2.style.top = y + "px";
          
        }
      }
      //鼠标释放时候的函数
      function end() {
        flag = false;
      }
     let div2 =  box
      div2.addEventListener(
        "mousedown",
        function () {
          down();
        },
        false
      );
      div2.addEventListener(
        "touchstart",
        function () {
          down();
        },
        false
      );
      div2.addEventListener(
        "mousemove",
        function () {
          move();
        },
        false
      );
      div2.addEventListener(
        "touchmove",
        function () {
          move();
             event.preventDefault()
          return
        },
        false
      );
      document.body.addEventListener(
        "mouseup",
        function () {
          end();
        },
        false
      );
      div2.addEventListener(
        "touchend",
        function () {
          end();
        },
        false
      );
    });

    return{ 
      // 输出
    }
  },
};
</script>

<style>
#MoveBox {
  position: fixed;
  top: 0;
  right:0;
  z-index: 999; 
}

html{
  
touch-action: none;
}
</style>